<template>
  <div>
    <div class="protainer">
      <div class="tilte">daniella登陆系统</div>

      <div class="toggle">
        <div
          class="moble"
          :class="{ slcss: selectMoble }"
          @click="selectMoble = true"
        >
          短信登录
        </div>

        <div
          class="account"
          :class="{ slcss: !selectMoble }"
          @click="selectMoble = !true"
        >
          账号登陆
        </div>
      </div>

      <!-- FORM -->
      <!-- 表单开始 -->
      <div class="toggleForm">
        <!-- 手机登陆 -->
        <div v-show="selectMoble">
          <van-form @submit="onSubmit" ref="moble">
            <van-field
              v-model="moble.username"
              name="手机号码"
              label="手机号码"
              placeholder="手机号码"
              :rules="[{ required: true, message: '请填写手机号码' }]"
            />
            <div  class="fixedinp">

            <van-field
              v-model="moble.password"
              type="password"
              name="验证码"
              label="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
              
            >
            </van-field>
            <button class="sendMsm" @click="smsHandle" :disabled="smsRuning">{{
              sms ? `${sms}s后发验证`:"发送验证码"}}</button>
            </div>
          </van-form>
        </div>

        <!-- 账号登陆 -->
        <div class="slaccount" v-show="!selectMoble">
          <div class="toggleForm">
            <van-form @submit="onSubmit" ref="account">
              <van-field
                v-model="account.username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="account.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            </van-form>
          </div>
        </div>
      </div>
      <span style="font-size: 2px; color: #d1d1d1">
        温馨提示: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad
        distinctio</span
      >

      <div class="logBtn">
        <van-button @click="sendInfo" round>登录</van-button>
      </div>

      <div class="about">关于我们</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      moble: {
        username: "",
        password: "",
      },
      account: {
        username: "0233200",
        password: "0233200",
      },
      sms: 0,
      smsRuning:false,
      selectMoble: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    sendInfo() {
      /* 判断此时选中哪个From表单 */
      if (this.selectMoble) {
       
        /* 手机 */
        this.$toast('此功能未实现')
      } else {
        /* 验证规则 */
        const {username,password} = this.account

        if(username.length < 5 || password.length < 5 ){
          this.$toast('账号和密码长度必须大于5')
        }else{
          this.$api.resLogin({username,password}).then(res=>{
            const {data} = res
            if(data.code != 200){
              this.$toast(data.msg)
            }else{
              this.$store.dispatch('changeInfo',data)
              this.$toast(data.msg)
              setTimeout(()=>{
                this.$router.push('/mine')
              },1000)
              
            }
          })
        }
      }
    },
    smsHandle() {
      if(!this.smsRuning){
      this.smsRuning = true
      this.sms = 5
       const intervalId= setInterval(()=>{
         this.sms--
         if(this.sms <= 0){
           clearInterval(intervalId)
           this.smsRuning = false
         }
       },1000)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.protainer {
  height: 800px;
  padding: 50px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .tilte {
    font-size: 60px;
    text-align: center;
    font-weight: 600;
    color: var(--themeColor);
  }
  // .toggle::after{
  //     content: ' ';
  //     width: 130px;
  //     height: 10px;
  //     background-color: rgb(255, 7, 7);
  //     position: absolute;
  //     bottom: 0;
  //     transition: all 400ms ease;
  //     left: 100px;
  //   }
  .toggle {
    display: flex;
    position: relative;
    justify-content: space-around;
    .slcss {
      color: var(--themeColor);
      padding-bottom: 23px;
      border-bottom: 5px solid var(--themeColor);
    }
  }
  .toggleForm {
    padding: 0 30px;
    height: 250px;
    // position: relative;
    display: flex;
    flex-direction: column;
     


   
    .fixedinp{
      position: relative;
    }
    .sendMsm {
      position: absolute;
      width: 154px;
      height: 50px;
      top:25px;
      right: 30px;
      
      border: 1px solid transparent;
      border-radius: 17%;
      background-color: var(--themeColor);
      color: #fff;
      font-size: 12px;
    }
  }

  span {
    text-align: center;
  }
  .logBtn {
    margin: 0 auto;
    width: 80%;
    .van-button {
      background-color: var(--themeColor);
      width: 100%;
    }
  }
  .about {
    font-size: 30px;
    color: rgb(211, 211, 211);
    text-align: center;
  }
}
</style>